import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default class Search extends Component {
  search = async () => {
    // PubSub.publish('updateState', {msg: "老子天下第一", age: 40})
    // // 获取用户输入（连续接口+重命名）
    const {keyWordElement:{value:keyword}} = this
    console.log(keyword)

    // this.props.updateAppState({
    //   isFirst: false,
    //   isLoading: true
    // })

    PubSub.publish('updateState', {
      isFirst: false,
      isLoading: true
    })
    //#region 发送网络请求

    // try {
    //   const res = await axios.get(`/api3/search/users?q=${keyword}`)
    //   // this.props.updateAppState({
    //   //   isLoading: false,
    //   //   users: res.data.items,
    //   // })
    //   PubSub.publish('updateState', {
    //     isLoading: false,
    //     users: res.data.items,
    //   })
    // } catch (error) {
    //   // this.props.updateAppState({
    //   //   isLoading: false,
    //   //   err: error.message,
    //   // })
    //   PubSub.publish('updateState', {
    //     isLoading: false,
    //     err: error.message,
    //   })
      
    // }
    //#endregion
    
    // fetch发送请求
    // *****基本案例******
    // fetch(`/api3/search/users2?q=${keyword}`).then(
    //   res => console.log('联系服务器成功了', res), // 这里并不能拿到结果，要将res加上.json()方法，且返回的是promis对象
    //   error => console.log('联系服务器失败了',  error)
    // )
    
    // ***** 分开处理错误的做法*******
    // fetch(`/api3/search/users2?q=${keyword}`).then(
    //   res => {
    //     console.log('联系服务器成功了')
    //     return res.json()  // promiss 对像
    //   }, 
    //   error => {
    //     console.log('联系服务器失败了',  error)
    //     return new Promise(()=>{})  // 中断Promise, 不加这一句会跑到下面一个then的成功回调
    //   }
    // ).then(
    //   response => {    // 会跑到这个回调
    //     console.log('获取数据成功了', response)
    //   },
    //   error=>{
    //     console.log('获取数据失败了', error)
    //   }
    // )

    // ******统一处理错误的做法*********
    // fetch(`/api3/search/users2?q=${keyword}`).then(
    //   res => {
    //     console.log('联系服务器成功了')
    //     return res.json()  // promiss 对像
    //   }
    // ).then(
    //   response => {    // 会跑到这个回调
    //     console.log('获取数据成功了', response)
    //   }
    // ).catch(
    //   error=>{
    //     console.log('获取数据发生错误！', error)
    //   }
    // )

    // ******* async await的做法*******
    try {
      const req = await fetch(`/api3/search/users2?q=${keyword}`)
      const result = await req.json()
      console.log("这里是结果", result)
      PubSub.publish('updateState', {
      isLoading: false,
      users: result.items
      })
    } catch (error) {
      PubSub.publish('updateState', {
        isLoading: false,
        err: error.message
      })
      console.log('获取数据发生错误！', error)
    }
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="请输入要搜索的用户名"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
